<template>
  <div class="next-door-content-view">
    <div class="top-wrap">
      <div class="img"></div>
      <div class="text">
        <div class="tip">开启地理位置权限</div>
        <div class="little-tip">开启权限后您将能看到附近更多有趣的动态哦 ~</div>
      </div>
      <div class="btn">去开启</div>
    </div>
    <div class="content-box">
      <div class="content-list-wrap" v-for="item in contentData" :key="item.id">
        <dynamicCom
          :contentData="item"
          @toLike="toLike(item)"
          @getFollowState="getFollowState(item)"
          @addShareCount="addShareCount(item)"
          @deleteData="deleteData(item)"
          @getHeight="getHeight($event)"
          @goTocomment="goTocomment(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import dynamicCom from "@/components/DynamicCom/dynamicCom.vue";
import { getDynamicNearbyContent } from "@/api/dynamic";
export default {
  name: "NearbyContentView",
  props: {
    scrollTop: {},
  },
  components: {
    dynamicCom,
  },
  data() {
    return {
      //数据
      contentData: [],
      //总高度
      TotalHeight: 0,
      //加载状态
      loading: true,
      //刷新状态
      refreshState: false,
      //所有容器的单个高度
      HeightArr: [],
      //获取数据的id
      dataId: 0,
      //刷新时获取的数据
      refreshData: [],
      //定时器延迟拿取数据
      timer: null,
      //上拉刷新
      isLoading: false,
    };
  },
  watch: {
    scrollTop(newval, oldval) {
      let Bottom = null;
      if (this.TotalHeight > newval) {
        Bottom = this.TotalHeight - newval;
      }
      // console.log(Bottom);
      if (this.contentData.length > 0) {
        let autoplayIndex = Math.round(
          ((newval - 100 > 0 ? newval - 100 : 0) / this.TotalHeight) * 10
        );
        this.contentData.forEach((item, index) => {
          if (autoplayIndex == index) {
            item.isAutoplay = true;
          } else {
            item.isAutoplay = false;
          }
        });
      }
      if ((Bottom > 0 && Bottom < 500 && newval > oldval) || Bottom == null) {
        if (this.loading) {
          this.loading = false;
          this.getDynamicNearbyContentData(1);
        }
      }
      // console.log(this.contentData);
    },
    loading(newval) {
      if (newval == false) {
        this.TotalHeight = 0;
        this.HeightArr = [];
      }
    },
    "contentData.length"() {
      this.timer = setTimeout(() => {
        this.getFollowedData();
        this.timer = null;
      }, 100);
    },
  },
  created() {
    this.getDynamicNearbyContentData(this.dataId);
  },
  activated() {
    //定时器延迟拿取数据
    this.timer = setTimeout(() => {
      this.getFollowedData();
      this.timer = null;
    }, 100);
  },
  methods: {
    //获取数据
    getDynamicNearbyContentData(dataparam) {
      getDynamicNearbyContent({ axios: this.$axios }, dataparam).then(
        ({ data }) => {
          // console.log(data.data);
          data.data.forEach((item) => {
            item["isAutoplay"] = false;
            item["isFollow"] = false;
            item["isLike"] = false;
            let ZhReg = /^\{/;
            let res = ZhReg.test(item.content);
            if (res) {
              let Zh = item.content
                .split(`"qiushi_content": "`)[1]
                .slice(0, -2);
              item.content = unescape(Zh.replace(/\\/g, "%"));
            }
          });
          this.contentData.push(...data.data);
        }
      );
    },
    //点赞
    toLike(item) {
      item.isLike = !item.isLike;
      if (item.isLike) {
        item.like_count++;
      } else {
        item.like_count--;
      }
    },
    //关注
    getFollowState(item) {
      item.isFollow = !item.isFollow;
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let idArr = [];
      followedData.forEach((item) => {
        idArr.push(item.id);
      });
      if (item.isFollow && idArr.indexOf(item.user.id) == -1) {
        followedData.push(item.user);
        window.localStorage.setItem(
          "followedData",
          JSON.stringify(followedData)
        );
      } else {
        // console.log(followedData.indexOf(item.user));
        followedData.forEach((item2, index) => {
          if (item2.id == item.user.id) {
            followedData.splice(index, 1);
            window.localStorage.setItem(
              "followedData",
              JSON.stringify(followedData)
            );
          }
        });
      }
    },
    //分享
    addShareCount(item) {
      item.share_count++;
    },
    //删除
    deleteData(item) {
      this.$dialog
        .confirm({
          title: "确定要删除吗?",
        })
        .then(() => {
          // on confirm
          this.contentData.forEach((item2, index) => {
            if (item2 == item) {
              this.contentData.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取所有内容的高度
    getHeight(val) {
      this.TotalHeight += val;
      if (this.dataId < 2) {
        this.HeightArr.push(val);
      } else {
        this.refreshData.push(val);
      }
    },
    //获取已关注
    getFollowedData() {
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let followedDataId = [];
      followedData.forEach((item) => {
        followedDataId.push(item.id);
      });
      this.contentData.forEach((item) => {
        if (followedDataId.indexOf(item.user.id) != -1) {
          item.isFollow = true;
        } else {
          item.isFollow = false;
        }
      });
    },
    //跳转评论详情页
    goTocomment(item) {
      console.log(item);
      window.localStorage.setItem("commentContentData", JSON.stringify(item));
      let dataId = item.id;
      if (dataId != 125654473 && dataId != 125657703) {
        dataId = 125654473;
      }
      this.$router.push(`/comment?id=${dataId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.next-door-content-view {
  width: 100%;
  margin-top: 65px;
  padding: 10px;
  box-sizing: border-box;
  .top-wrap {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #ddd;
    display: flex;
    padding-bottom: 20px;
    position: relative;
    .img {
      width: 88px;
      height: 88px;
      flex: 0 0 88px;
      margin: 10px 10px 0 0;
      background-image: url("@/assets/images/Snipaste_2022-11-19_16-55-20.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .text {
      width: 100%;
      height: 50px;
      .tip {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
      }
      .little-tip {
        color: #888;
        line-height: 25px;
        font-size: 14px;
      }
    }
    .btn {
      width: 70px;
      height: 30px;
      background-color: rgb(253, 234, 49);
      position: absolute;
      right: 0;
      bottom: 20px;
      border-radius: 4px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
    }
  }
  .content-box {
    margin-bottom: 50px;
  }
}
</style>